// 颜色变量
@primary-color: #1890ff;
@primary-color-hover: #40a9ff;
@primary-color-active: #096dd9;
@primary-color-outline: rgba(24, 144, 255, 0.2);

@success-color: #52c41a;
@warning-color: #faad14;
@error-color: #f5222d;
@info-color: #1890ff;

@text-color: rgba(0, 0, 0, 0.85);
@text-color-secondary: rgba(0, 0, 0, 0.65);
@text-color-tertiary: rgba(0, 0, 0, 0.45);
@disabled-color: rgba(0, 0, 0, 0.25);

@border-color-base: #d9d9d9;
@border-color-split: #f0f0f0;
@background-color-light: #fafafa;
@background-color-base: #f5f5f5;

// 尺寸变量
@border-radius-base: 6px;
@border-radius-sm: 4px;
@border-radius-lg: 8px;

@font-size-base: 14px;
@font-size-lg: 16px;
@font-size-sm: 12px;

@line-height-base: 1.5715;
@line-height-lg: 1.5;
@line-height-sm: 1.66667;

// 间距变量
@padding-xs: 4px;
@padding-sm: 8px;
@padding-md: 12px;
@padding-lg: 16px;
@padding-xl: 24px;

@margin-xs: 4px;
@margin-sm: 8px;
@margin-md: 12px;
@margin-lg: 16px;
@margin-xl: 24px;

// 阴影变量
@box-shadow-base:
  0 3px 6px -4px rgba(0, 0, 0, 0.12),
  0 6px 16px 0 rgba(0, 0, 0, 0.08),
  0 9px 28px 8px rgba(0, 0, 0, 0.05);
@box-shadow-card:
  0 1px 2px -2px rgba(0, 0, 0, 0.16),
  0 3px 6px 0 rgba(0, 0, 0, 0.12),
  0 5px 12px 4px rgba(0, 0, 0, 0.09);
@box-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1);

// 断点变量
@screen-xs: 480px;
@screen-sm: 576px;
@screen-md: 768px;
@screen-lg: 992px;
@screen-xl: 1200px;
@screen-xxl: 1600px;

// 混合函数
.flex-center() {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between() {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-column() {
  display: flex;
  flex-direction: column;
}

.text-ellipsis() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-ellipsis-multiple(@lines: 2) {
  display: -webkit-box;
  -webkit-line-clamp: @lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.transition-base(@property: all, @duration: 0.3s, @timing: ease-in-out) {
  transition: @property @duration @timing;
}

.border-radius(@radius: @border-radius-base) {
  border-radius: @radius;
}

.box-shadow(@shadow: @box-shadow-base) {
  box-shadow: @shadow;
}
